<template>
    <div class='goodslist'>
        <el-form :inline="true" style="margin: 10px 0;">
            <el-form-item style="margin: 0 5px 0 0">
                <el-input style="width: 350px;" placeholder="请输入内容" v-model="query">
                <el-button slot="append" icon="el-icon-search" @click="queryGoods"></el-button>
                </el-input>
            </el-form-item>
            <el-form-item style="margin: 0 5px 0 0">
                <el-button type="success" plain @click="hrefadd">添加商品</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="result.goods" height="450" border stripe style="width: 100%;">
            <el-table-column type="index" label="#" width="50"></el-table-column>
            <el-table-column prop="goods_name" label="商品名称"></el-table-column>
            <el-table-column prop="goods_price" label="商品价格(元)" width="100"></el-table-column>
            <el-table-column prop="goods_weight" label="商品重量" width="80"></el-table-column>
            <el-table-column prop="add_time" label="创建日期" width="120">
                <template slot-scope="scope">{{scope.row.add_time | addTime}}</template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" plain size="small" icon="el-icon-edit" circle @click="editGoods(scope.row)"></el-button>
                    <el-button type="danger" plain size="small" icon="el-icon-delete" circle @click="removeGoods(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="+params.pagenum"
        :page-sizes="[10,20,30,40]"
        :page-size="+params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="result.total">
        </el-pagination>
        <el-dialog title="编辑商品" :visible.sync="editGood">
            <el-form :model="editGoodsForm">
                <el-form-item 
                prop="goods_name"
                label="商品名称" 
                :label-width="formLabelWidth"
                :rules="[
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ]">
                    <el-input v-model="editGoodsForm.goods_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item 
                label="价格" 
                :label-width="formLabelWidth"
                :rules="[
                    { required: true, message: '请输入商品价格', trigger: 'blur' }
                ]">
                    <el-input v-model="editGoodsForm.goods_price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item 
                label="数量" 
                :label-width="formLabelWidth"
                :rules="[
                    { required: true, message: '请输入商品数量', trigger: 'blur' }
                ]">
                    <el-input v-model="editGoodsForm.goods_number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item 
                label="重量" 
                :label-width="formLabelWidth"
                :rules="[
                    { required: true, message: '请输入商品重量', trigger: 'blur' }
                ]">
                    <el-input v-model="editGoodsForm.goods_weight" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="介绍" :label-width="formLabelWidth">
                    <el-input v-model="editGoodsForm.goods_introduce" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上传图片的临时路径" :label-width="formLabelWidth">
                    <el-input v-model="editGoodsForm.pics" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品参数" :label-width="formLabelWidth">
                    <el-input v-model="editGoodsForm.attrs" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editGood=false">取 消</el-button>
                <el-button type="primary" @click="submitGoods(editGoodsForm)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { goodsList,getGoods,submitGoods,removeGoods} from '../../http/api'
export default {
    data() {
        return {
            // 从路径中获取params 同步
            params: {
                query: this.$route.query.query || '',
                pagenum: this.$route.query.pagenum || 1,
                pagesize: this.$route.query.pagesize || 10
            },
            result: {},
            query: this.$route.query.query || '',
            editGood: false,
            formLabelWidth: '100px',
            editGoodsForm: {goods_id: '',goods_name: '',goods_price: '',goods_number: '',goods_weight: '',goods_introduce: '',pics: '',attrs: ''}
        }
    },
    methods:{
        async goodsList(){ //商品列表数据
            if (this.$route.query.query) {
                const res = await goodsList(this.params)
                this.result=res.data;
            } else {
                const {pagenum,pagesize} = this.params;
                const res = await goodsList({pagenum,pagesize})
                this.result=res.data;
            }
        },
        handleSizeChange(num) { //每页显示条数发生变化时触发
            this.params.pagesize=num;
            this.goodsList();
        },
        handleCurrentChange(num) { //页码发生变化
            this.params.pagenum=num;
            this.goodsList();
        },
        async queryGoods(){ //查询商品
            this.params.pagenum=1;
            this.params.query=this.query;
            const res = await goodsList(this.params)
            this.result=res.data;
        },
        async getGoods(id){ //根据id查询商品
            const res = await getGoods(id);
            return res;
        },
        async editGoods(obj){ //编辑商品获取商品信息并跳转
            const res = await getGoods(obj.goods_id);
            // console.log(res);
            this.$router.push({name: 'editgoods',params:{goods: res}})
        },
        submitGoods(editGoodsForm){ //编辑提交商品
            const {goods_id,goods_name,goods_price,goods_number,goods_weight,goods_introduce,pics,attrs} = editGoodsForm;
            const data = {goods_name,goods_price,goods_number,goods_weight,goods_introduce};
            return submitGoods(goods_id,data).then(res=>{
                console.log(res);
                this.$message({ 
                    showClose: true,
                    message: res.meta.msg,
                    type: 'success'
                })
                this.goodsList();
            })
        },
        removeGoods(obj){ //删除商品
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                return removeGoods(obj.goods_id).then(res=>{
                // console.log(res)
                this.$message({
                    showClose: true,
                    type: 'success',
                    message: res.meta.msg
                });
                this.goodsList();
                })
            }).catch(() => {
                this.$message({
                    showClose: true,
                    type: 'info',
                    message: 'catch--'
                });
            });
        },
        hrefadd(){ //跳转到添加商品页面
            this.$router.push({name:"goodsadd"});
        }
    },
    watch:{
        params:{ //监听params并传入路径
            deep: true,
            handler(val){
                this.$router.push({query: val})
            }
        }
    },
    created(){
        this.goodsList();
    },
    filters:{
        addTime(item){
            var date = new Date(item);
            var month = date.getMonth()+1;
            item = date.getFullYear() + '-' + ('0'+month) + '-'+ date.getDate();
            return item;
        }
    }
}
</script>
<style lang='scss' scoped>
</style>